<template>
  <div class="father">
    <div class="son">
      <div class="grandson" v-for="(v, k) in content" :key="k">
        <div><img :src="v.icon" /></div>
        <div>{{ v.title }}</div>
      </div>
    </div>
    <div class="son" v-for="(v, k) in imgs" :key="k">
      <img class="card" :src="v" />
    </div>
  </div>
</template>
<script>
import { defineComponent, reactive, toRefs } from "vue";

export default defineComponent({
  name: "CardsPart",
  setup() {
    const state = reactive({
      content: [
        {
          title: "保障服务",
          icon: require("../../assets/time.png"),
        },
        {
          title: "企业团购",
          icon: require("../../assets/ts-图标_city.png"),
        },
        {
          title: "F码通道",
          icon: require("../../assets/F码.png"),
        },
        {
          title: "米粉卡",
          icon: require("../../assets/sim卡.png"),
        },
        {
          title: "以旧换新",
          icon: require("../../assets/money_bag.png"),
        },
        {
          title: "话费充值",
          icon: require("../../assets/话费2.png"),
        },
      ],

      imgs: [
        require("../../assets/01.jpg"),
        require("../../assets/02.jpg"),
        require("../../assets/03.jpg"),
      ],
    });

    return {
      ...toRefs(state),
    };
  },
});
</script>

<style lang="scss" scoped>
.father {
  width: 1226px;
  margin: auto;
  margin-top: 10px;
  margin-bottom: 10px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  .son {
    width: 315px;
    height: 160px;
    background: red;
    .card {
      width: 100%;
      height: 100%;
    }
  }
  .son:nth-child(1) {
    width: 240px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    background: #5f5750;
    .grandson {
      width: 78px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      border: 0.1px solid #ccc;
      color: #ccc;
      img {
        width: 30px;
        height: 30px;
      }
    }
  }
}
</style>